@import '../variable.less';

.bar-message-wrapper {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0;
  top: 16px;
  right: 0;
  pointer-events: none;
  z-index: 3060;

  .bar-message {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 6px 12px;
    border-radius: @border-radius-light;
    color: @white;
    box-shadow: @shadow-1-super-heavy;
    font-size: @text-normal;
    transition: all 0.3s;
    &__icon {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      transform: scale(0.8);
      margin-right: 4px;
    }
    &__content {
      line-height: @text-normal;
    }

    // transition group 动画
    &.v-enter-from,
    &.v-leave-to {
      opacity: 0;
      transform-origin: 0 0;
      transform: translateY(-100%);
    }

    &.v-leave-active {
      position: absolute;
    }
  }
  .bar-message-info {
    color: @text-color;
    background-color: @white;
    border: 1px solid @border-color-base;
  }
  .bar-message-success {
    background-color: @success-color;
  }
  .bar-message-warn {
    color: @text-color;
    background-color: @warn-light;
  }
  .bar-message-error {
    background-color: @danger-color;
  }
}
